<template>
  <div class="inOutList">
    <div ref="dgtools" class="filter-container">
      <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
        <el-form-item>
          <el-date-picker type="date" style="width: 130px" placeholder="开始日期" value-format="yyyy-MM-dd"
            v-model="dg.ps.stime">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-date-picker type="date" placeholder="结束日期" v-model="dg.ps.etime" value-format="yyyy-MM-dd"
            style="width: 130px">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-select v-model="dg.ps.cusTypeId" clearable filterable placeholder="客户类型" style="width: 120px;">
            <el-option v-for="it in cusTypeList" :key="it.id" :label="it.typeName" :value="it.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <!-- <el-select
            v-model="dg.ps.customId"
            clearable filterable
            placeholder="客户名称"
            style="width: 120px;">
            <el-option
              v-for="it in customList"
              :key="it.id"
              :label="it.unitName"
              :value="it.id+''">
              <span>{{it.unitName}}</span>
              <span>{{it.baseUserId.phone}}</span>
            </el-option>
          </el-select> -->

          <el-select v-model="dg.ps.customId" clearable filterable :remote="true" :remote-method="queryCusPageList"
            :placeholder="'请搜索选择客户'" style="width: 150px">
            <el-option v-for="it in customList" :key="it.baseUserId.uname" :label="it.unitName" :value="it.id">
              <span>{{ it.unitName }}</span>
              <span>{{ it.baseUserId.realName + '（' + it.baseUserId.phone + '）' }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-select v-model="dg.ps.serviceUname" clearable filterable placeholder="业务员" style="width: 120px;">
            <el-option v-for="it in serviceManList" :key="it.id" :label="it.realName" :value="it.uname">
              <span>{{ it.realName }}</span>
              <span>{{ it.phone }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-button style="margin-right: 20px;" type="primary" icon="el-icon-search" @click="getDgList">搜索</el-button>

        <el-tag style="margin-right: 20px;" type="danger" effect="dark" size="medium  ">总应收:{{
          dg.totalStatistics.totalGath }} 元</el-tag>
        <el-tag style="margin-right: 20px;" type="success" effect="dark" size="medium  ">总应支:{{
          dg.totalStatistics.totalPay }}元 </el-tag>
      </el-form>

      <TableSelfSet v-if="dg.columns.length > 0" :tbTitle="'应收应支列表'" :dgName="dg.dgName" :tbId="dg.tbName"
        :srcCols="dg.srcCols" :columns="dg.columns" @saveSet="saveTbSet" />
    </div>

    <div style="margin-top: 10px">
      <el-table :ref="dg.tbName" :data="dg.list" row-key="id" :height="bodyHeight" border fit
        :row-class-name="rowClassName" @header-dragend="dragHeader">
        <el-table-column fixed="left" type="index" :label="'编号'" width="50" align="center"></el-table-column>
        <el-table-column v-for="(col, index) in dg.columns" :key="index" :class-name="dg.dgName" :prop="col.field"
          :label="col.label" :width="col.width">
          <template slot-scope="{row}">
            <template v-if="col.field == 'gathMoney'"><span>¥{{ row.gathMoney }}</span></template>
            <template v-else-if="col.field == 'payMoney'"><span>¥{{ row.payMoney }}</span></template>
            <template v-else-if="col.field == 'balance'"><span>¥{{ row.balance }}</span></template>
            <template v-else-if="col.field == 'firstTime'"><span>{{ row.firstTime | time('yyyy-MM-dd HH:mm')
            }}</span></template>

            <template v-else>{{ getColVal(row, col.field) }}</template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination v-show="dg.total > 0" :total="dg.total" :page.sync="dg.ps.page" :limit.sync="dg.ps.rows"
      @pagination="getDgList" />
  </div>
</template>

<script>
import DataGridBase from "@/views/mixins/DataGridBase";
import DataGridResize from "@/views/mixins/DataGridResize";
import TableSelfSet from '@/components/TableSelfSet';
import Pagination from "@/components/Pagination";

import * as orderService from "@/api/services/order.service";
import * as commonSer from "@/api/services/common.service";

export default {
  name: "InOutList",
  mixins: [DataGridBase, DataGridResize],
  components: { TableSelfSet, Pagination },
  data() {
    let cols = [
      { label: '客户名称', field: 'companyName', width: 200 },
      { label: '客负责人', field: 'dutyName', width: 100 },
      { label: '业务员', field: 'serviceName', width: 100 },
      { label: '最早欠款时间', field: 'firstTime', width: 120 },
      { label: '客户性质', field: 'cusType', width: 80 },
      { label: '应收', field: 'gathMoney', width: 80 },
      { label: '应付', field: 'payMoney', width: 80 },
      { label: '金额', field: 'balance', width: 80 },
    ];

    return {
      dg: {// 数据列表参数
        dgName: 'dg',
        tbName: 'inOutListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        totalStatistics: {
          totalGath: '0', // 总应收
          totalpay: '0',  // 总应支
        },// 总统计
        ps: { // 过滤参数
          page: 1, rows: 100,
          // 开始时间
          stime: '',
          // 结束时间
          etime: '',
          // 客户类型id
          cusTypeId: '',
          // 客户id eg:1
          customId: '',
          // 业务员账号 eg:U1586856470308
          serviceUname: '',
        },
      },

      // 客户类型-列表
      cusTypeList: [],
      // 客户-列表
      customList: [],
      // 业务员-列表
      serviceManList: [],
    };
  },
  created() {
    this.initTbSetData(this.dg.dgName);

    this.init();
  },
  methods: {
    init() {
      this.getDgList();

      this.getCusTypeList();
      // this.getCompanyCusList();
      this.getServiceManList();
    },
    // 获取-客户类型-下拉框数据
    getCusTypeList() {
      commonSer.getCompanyAllCusType({}).then(res => {
        if (res && res.code == 1) {
          this.cusTypeList = res.cusTypes;
        }
      });
    },
    // // 获取-客户列表-下拉框数据
    // getCompanyCusList() {
    //   let ps = {cusType: "CARTEAM", cusTypeId: "", find: ""};
    //   commonSer.getCompanyCusList(ps).then((res) => {
    //     if (res.code == 1) this.customList = res.data;
    //   });
    // },
    /**
     * 获取-单位客户列表（用于下拉框）
     * @param find 客户手机号/用户名
     */
    queryCusPageList(find) {
      commonSer.queryComboCusPageList({ find: find }).then(res => {
        if (res && res.code == 1) this.customList = res.data;
      });
    },
    // 获取-业务员-下拉框数据
    getServiceManList() {
      let ps = { deptName: "", isContainDriver: "", staffState: "" };
      commonSer.getServiceManList(ps).then((res) => {
        if (res.code === 1) this.serviceManList = res.data.map((item) => item.baseUserId);
      });
    },

    // 获取列表
    getDgList() {
      const that = this, U = that.U, ps = U.scopy(that.dg.ps);
      orderService.sumCusGathPay(ps).then(res => {
        if (res && res.code == 1) {
          let list = res.data;
          let totalGath = res.totalGath.toFixed(2)
          let totalPay = res.totalPay.toFixed(2)

          that.dg.totalStatistics.totalGath = totalGath
          this.dg.totalStatistics.totalPay = totalPay
          console.log(this.dg.totalStatistics.totalPay, '1234')
          list.forEach(it => { it.dgName = that.dg.dgName; });
          that.dg.list = list;
          that.dg.total = res.count;
        }
      });
    },

  },
};
</script>

<style scoped>
</style>
